<template>
	<view class="user">
		<view class="user_status con_auto">
			<view class="user_title">
				金额会员
			</view>
			<u-grid :border="false" col="3" @click="handleUser($event,'price')">
				<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="28"></u-icon>
					<text class="grid-text">{{ listItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="user_status con_auto">
			<view class="user_title">
				次数会员
			</view>
			<u-grid :border="false" col="3" @click="handleUser($event,'number')">
				<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="28"></u-icon>
					<text class="grid-text">{{ listItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '/static/status/1.png',
					title: '优质会员',
					path: 'excellent'
				},
				{
					name: '/static/status/2.png',
					title: '忠诚会员',
					path: 'loyalty'
				},
				{
					name: '/static/status/3.png',
					title: '活跃会员',
					path: 'active'
				},
				{
					name: '/static/status/4.png',
					title: '沉睡会员',
					path: 'slumber'
				},
				{
					name: '/static/status/5.png',
					title: '从未消费会员',
					path: 'none'
				}
			]
		};
	},
	methods: {
		handleUser(idx,type){
			const item = this.list[idx]
			uni.navigateTo({
				url:'/pages/work/user/user?path='+item.path+"&title="+item.title+"&type="+type
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.user_title {
		color: $common-grey-color;
		font-size: 28rpx;
		padding: 24rpx;
	}
.grid-text {
	font-size: 14px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
.user {
	&_status {
		background: #fff;
		border-radius: 30rpx;
		margin-top: 20rpx;
	}
}
</style>
